<template>
  <div id="new-law-filter">
    <div class="date">
      <span>对比日期：</span>
      <el-date-picker
        v-model="params.date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="changeHandle"
        >
      </el-date-picker>
    </div>
    <!-- <div class="split"></div> -->
    <div class="date-btn">
      <el-button plain class="btn" type="primary" @click="dateClick(1)">一个月</el-button>
      <el-button plain class="btn" type="primary" @click="dateClick(3)">三个月</el-button>
      <el-button plain class="btn" type="primary" @click="dateClick(6)">半年</el-button>
    </div>
    <div class="search_box">
      <search-filter @search="searchHandle"></search-filter>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import searchFilter from '@/components/search-filter'
export default {
  name: 'new-law-express-filter',
  components: {
    searchFilter
  },
  data () {
    return {
      params: {
        radio: '',
        input: '',
        date: []
      }
    }
  },
  methods: {
    dateClick (time) {
      let _date = moment(new Date())
      let start = new Date().getTime()
      let end = ''
      if (time === 1) end = _date.subtract(1, 'months').format('YYYY-MM-DD')
      if (time === 3) end = _date.subtract(3, 'months').format('YYYY-MM-DD')
      if (time === 6) end = _date.subtract(6, 'months').format('YYYY-MM-DD')
      this.params.date = [end, this.getDate(start)]
    },
    getDate (str) {
      let oDate = new Date(str)
      let oYear = oDate.getFullYear()
      let oMonth = oDate.getMonth() + 1
      let oDay = oDate.getDate()
      let oTime = oYear + '-' + this.addZero(oMonth) + '-' + this.addZero(oDay)
      return oTime
    },
    changeHandle (e) {
      this.params.date = e
    },
    addZero (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    searchHandle (e) {
      this.params.radio = e.radio
      this.params.input = e.input
    }
  },
  watch: {
    params: {
      handler () {
        this.$emit('paramsChange', this.params)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

#new-law-filter{
  font-size: $fs-m;
  .date{
    span{
      color: $sedondary-text-color;
    }
  }
  &:after{
    display: block;
    content: '';
    clear: both;
  }
  >div{
    float: left;
  }
  .date-btn{
    margin-left: 10px;
    margin-top: 6px;
    .btn{
      width:60px;
      height:28px;
      border:1px solid rgba(245,245,245,1);
      color: $sedondary-text-color;
      background: rgba(245,245,245,1);
      text-align: center;
      padding: 0;
    }
    .btn:hover{
      color: #FFFFFF;
      background-color: #3080FE;
      border-color: #3080FE;
    }
    .btn:last-of-type{
      margin-right: 10px;
    }
  }
  .search_box{
    width: 548px;
    margin-top: -8px;
    float: right;
  }
}
</style>

<style lang="scss">
 #new-law-filter{
   .el-date-editor{
     width: 278px;
   }
 }
</style>
